{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        div[class="el-input"] {
            width: 100%;
        }

        .input {
            width: 50%
        }

        .div_content {
            overflow: hidden
        }

        .div_content > div {
            float: left;
            padding: 10px
        }

        .label {
            width: 120px
        }
    .el-row{
        text-align: center;
    }
    </style>
    <div id="app">
        <template>
            <div class="div_content">
                <div class="label">活动名称</div>
                <div class="input">
                    <el-radio v-model="form.save_classification" label="1">本地存储</el-radio>
                    <el-radio v-model="form.save_classification" label="2">七牛云存储</el-radio>
                </div>
            </div>
            <div class="div_content">
                <div class="label">存储目录</div>
                <div class="input">
                    <el-input type="text" placeholder="请输入上传目录" v-model="form.save_path" maxlength="128" show-word-limit style="width: 400px"></el-input>
                </div>
            </div>
            <div v-show="form.save_classification==2">
                <div class="div_content">
                    <div class="label">空间名称</div>
                    <div class="input">
                        <el-input type="text" placeholder="请输入空间名称" v-model="form.bucket_name" show-word-limit style="width: 400px"></el-input>
                    </div>
                </div>

                <div class="div_content">
                    <div class="label">空间名称</div>
                    <div class="input">
                        <el-input type="text" placeholder="请输入资源域名" v-model="form.bucket_domain" show-word-limit style="width: 400px">
                        </el-input>
                    </div>
                </div>

                <div class="div_content">
                    <div class="label">ACCESS_KEY</div>
                    <div class="input">
                        <el-input type="text" placeholder="请输入access_key" v-model="form.access_key" show-word-limit maxlength="64">
                        </el-input>
                    </div>
                </div>

                <div class="div_content">
                    <div class="label">SECRET_KEY</div>
                    <div class="input">
                        <el-input type="text" placeholder="请输入secret_key" v-model="form.secret_key" show-word-limit maxlength="64">
                        </el-input>
                    </div>
                </div>
            </div>
        </template>
        <br>
        <el-row>
            <el-button type="primary" @click="submit()">提交保存</el-button>
            <el-button type="info" @click="form_reset()">取消重置</el-button>
        </el-row>
    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var Main = {
            data() {
                return {
                    form: {
                        save_classification: '{{ data.save_classification }}',
                        save_path: '{{ data.save_path }}',
                        bucket_name: '{{ data.bucket_name }}',
                        bucket_domain: '{{ data.bucket_domain }}',
                        access_key: '{{ data.access_key }}',
                        secret_key: '{{ data.secret_key }}',
                        uuid:'{{ data.uuid }}'
                    }
                }
            }
            , methods: {
                submit: function () {
                    submit_ajax(this,'POST',this.form,'',false)
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
{% endblock %}